<template>
  <Row>
    <i-col span="12" offset="6">
     <div style="background:#eee;padding: 40px">
        <Card :bordered="false">
            <!-- 标题 -->
            <h1 slot="title" style="margin: 0 auto; text-align: center">{{ answer.title }}</h1>
            <!-- 简介 -->
            <div v-html="answer.desc"></div>
            <Divider />
            <Form ref="formValidate" :model="field">
            <!-- 题目 -->
            <div v-for="(fields, index) in answer.survey_fields" :key="index">
              {{ index+1 }}.{{ fields.title }}
              <!-- 选项 -->
              <div v-if="fields.q_type == 'radio'">
                <br>
                <FormItem prop="radio">
                <RadioGroup v-model="field[index]" vertical>
                  <div v-for="(option, key) in fields.option" :key="key">
                    <Radio :label="key">{{ option.textVal }}</Radio>
                  </div>
                </RadioGroup>
                </FormItem>
                <Divider />
              </div>
              <div v-else-if="fields.q_type == 'checkbox'">
                <br>
                <FormItem prop="checkbox">
                  <CheckboxGroup v-model="field[index]">
                    <div v-for="(option, key) in fields.option" :key="key">
                      <Checkbox :label="key">{{ option.textVal }}</Checkbox>
                    </div>
                  </CheckboxGroup>
                </FormItem>
                <Divider />
              </div>
              <div v-else>
                <br>
                <FormItem prop="textarea">
                  <Input v-model="field[index]" style="width: 500px" type="textarea" :autosize="true" />
                </FormItem>
              <Divider />
              </div>
            </div>
            </Form>
            <!--  提交按钮 -->
            <div style="margin: 0 auto; text-align: center;padding: 50px">
              <Button type="primary" @click="jump">提交问卷</Button>
            </div>
        </Card>
    </div>
    </i-col>
  </Row>
</template>

<script>
import util from "@/libs/util";

export default {
  name: 'PcAnswer',
  data() {
    return {
      querys: {},
      limit: 10,
      answer: {},
      field: {}
    };
  },
  methods: {
    init() {
      util.ajax.get('/index/read', { params: { survey_no: this.querys.survey_no } })
      .then(response => {
        if (response.code === 200) {
          this.answer = response.data
        }
      })
    },
    jump () {
      let field = this.field
      let answer = this.answer
      let params = []

      for (let index in field) {
        let selOptIndex = field[index]
        let selOptItem = answer.survey_fields[index]
        if (selOptItem.q_type === 'radio') {
          params.push({
          uuid: selOptItem.unique_id,
          title:selOptItem.title,
          selOption: selOptIndex,
          selOptionText: selOptItem.option[selOptIndex].textVal
        })
        } else if (selOptItem.q_type === 'checkbox') {
          console.log('checkbox')
        } else {
          console.log('textarea')
        }
      }

      util.ajax.post('/index/doAnswer', { survey_no: this.querys.survey_no, uid: 16, survey_fields: JSON.stringify( params ) })
      .then(response => {
        if (response.code === 200) {
          this.$router.push({
            name: 'PcScore',
            query: { id: response.data }
          })
        } else {
          this.$Notice.error({
              title: response.msg
          })
        }
      })
    }
  },
  mounted() {
    this.querys = this.$route.query
    this.init()
  }
}
</script>
